<template>
  <div class="display">
    <div class="swiper" v-for="(item, index) in imgList" :key="item.id">
      <router-link :to="'/book/' + item.id">
        <img :src="item.imgUrl" v-show="index === active" />
      </router-link>
    </div>
    <div class="button">
      <div class="button-left" @click="leftMove" @mouseleave="loop">
        <span>&lt;</span>
      </div>
      <div class="button-right" @click="rightMove" @mouseleave="loop">
        <span>&gt;</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeScroll",
  data() {
    return {
      active: 0,
      timer: null,
      imgList: [],
    };
  },
  methods: {
    leftMove() {
      clearInterval(this.timer);
      this.active--;
      this.active = this.active < 0 ? this.imgList.length - 1 : this.active;
    },
    rightMove() {
      clearInterval(this.timer);
      this.active++;
      this.active %= this.imgList.length;
    },
    loop() {
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.active++;
        this.active %= this.imgList.length;
      }, 2000);
    },
  },
  mounted() {
    this.loop();
  },
  created() {
    this.axios
      .get("/book/new")
      .then((response) => {
        if (response.status == 200) {
          this.loading = false;
          this.imgList = response.data;
        }
      })
      .catch((error) => console.log(error));
  },
};
</script>
<style>
.display {
  width: 60%;
  height: 320px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  transition: 0.8s;
  border: 1px solid #e0f3e4;
}
.display:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.356);
}
.display .swiper img {
  position: absolute;
  width: 30%;
  height: 80%;
  padding: 5% 35%;
  cursor: pointer;
}
.display .button {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.display .button .button-left,
.display .button .button-right {
  width: 30px;
  height: 30px;
  margin: 18px;
  background: rgba(0, 0, 0, 0.445);
  border-radius: 30px;
  opacity: 0.9;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
}
.display .button .button-left:hover,
.display .button .button-right:hover {
  background: rgba(78, 76, 76, 0.548);
  color: #666;
}
</style>
